<template>
  <div>
    <div id="container">
      <div style="margin-top: 50px">
        <el-divider></el-divider>
      </div>
      <div><h2>反馈历史清单</h2></div>
      <div style="text-align: right; margin-bottom: 5px; width: 95%">
        <el-button type="primary" @click="addMessage">我要反馈</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="pageInfo.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe="true"
      >
        <el-table-column label="反馈编号" prop="tcid" align="center">
        </el-table-column>
        <el-table-column prop="customer.cname" label="反馈人" align="center">
        </el-table-column>
        <el-table-column prop="complaintTime" label="反馈时间" align="center">
        </el-table-column>
        <el-table-column label="反馈内容" align="center">
          <template slot-scope="scope">
            <span style="color: orange" @click="readComplaintDetail(scope.row)"
              >点击查看详情</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="flag" label="反馈状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.flag == 1" style="color: red">待处理</span>
            <span v-if="scope.row.flag == 2" style="color: orange">处理中</span>
            <span v-if="scope.row.flag == 3" style="color: green">已处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="delComplaint(scope.row)"
              >删除</el-button
            >
            <!-- <el-button
              type="danger"
              size="mini"
              @click="deletecustomer(scope.row)"
              >禁用</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
      <!--添加模态框开始-->
      <el-dialog title="我要反馈" :visible.sync="addDialogVisible">
        <el-form :model="complaintAddForm">
          <el-form-item>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="complaintAddForm.detail"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddSaveClick"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!--添加模态框结束-->
      <!--反馈内容模态框开始-->
      <el-dialog title="反馈内容" :visible.sync="detailDialogVisible">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="complaintDetail"
        >
        </el-input>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="detailDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--反馈内容模态框结束-->
    </div>
  </div>
</template>
<style scoped>
#container {
  width: 75%;
  height: 800px;
  margin: auto;
  border: #cfcccc solid 1px;
  background-color: rgb(252, 243, 213);
  text-align: center;
}
</style>
<script>
import { getComplaintList,saveComplaint,softdelComplaint } from "@/api/customerComplaint.js";
export default {
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },

      addDialogVisible: false,
      complaintAddForm: {},

      detailDialogVisible:false,
      complaintDetail:"",

    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.loadCustomerComplaint();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.loadCustomerComplaint();
    },
    loadCustomerComplaint() {
        var data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
      };
      getComplaintList(data).then(res=>{
        if(res.data.code==200){
            this.pageInfo = res.data.data;
        }
      });
    },
    addMessage(){
        this.addDialogVisible=true;
    },
    handleAddSaveClick(){
        var data = {
            detail:this.complaintAddForm.detail,
        };
        saveComplaint(data).then(res=>{
            if(res.data.code==200){
                alert("反馈成功");
                this.complaintAddForm={};
                this.addDialogVisible=false;
                this.loadCustomerComplaint();
            }
        });
    },
    delComplaint(row){
        softdelComplaint(row.tcid).then(res=>{
            if(res.data.code==200){
                alert("删除成功");
                this.loadCustomerComplaint();
            }
        });
    },
    readComplaintDetail(row){
         this.detailDialogVisible=true;
        this.complaintDetail=row.detail;
       
    }
  },
  mounted() {
    this.loadCustomerComplaint();
  },
};
</script>